<template>
	<view>
		<view class="list">
			 <!-- @click="goto('yljl')" -->
			<view class="item" v-for="(item,index) in data" :key="index">
				<view class="date">
					<view class="l">订单号:{{item.order_id}}</view>
					<view class="r">
						{{item.createtime}}
					</view>
				</view>
				<view class="itemt" v-if="item.hash.code">
					<view class="itemtl">{{item.hash.code}}</view>
				</view>
				<view class="itemt" v-if='item.hash.name'>
					<text style="font-size: 30rpx;font-weight: bold;">{{item.hash.name}}</text>
				</view>
				<view class="itemt" v-if="item.hash.intro"> 
					<text v-html="item.hash.intro"></text> 
				</view> 
				<view class="itemt" style="color: #999;" v-if="item.status == 0">
					当前订单还未定制或完成配方后未保存，请您在主页选择相应功能，调香完成后要点击确认定制即可完成调制。
				</view>
				<view class="itemm" v-if="item.status || status==1">
					<!--
					<u-tag text="可调配" type="warning" class="btnStatus" v-if="item.status == 0"></u-tag>
					-->
					<u-tag :text="'确认订单'" type="error" @click="lockHash(item.hash)" class="btnStatus" v-if="item.hash.is_lock == 0 && item.status == 1"></u-tag>
					<u-tag text="已确认" type="success" class="btnStatus" v-if="item.status == 1  &&  item.hash.is_lock == 1"></u-tag>
					<!--<u-tag :text="'重新调制(还有'+item.lock_time_min+'分钟锁定)'" type="info" @click="resetOrder(item.hash)" class="btnStatus" v-if="item.hash.is_lock == 0"></u-tag>-->
					
					<u-count-down @finish="lockHash(item.hash)" @change="timeChange(item,$event)" :time="item.hash.count_time" format="HH:mm:ss" class="btnStatus" v-if="item.hash.is_lock==0 && status==1">
						<u-tag :text="'重新调制(还有'+timeData[item.hash.id].minutes+'分'+timeData[item.hash.id].seconds+'秒锁定)'" type="info" @click="resetOrder(item.hash)"></u-tag>
						
					</u-count-down>
				</view>
		
			</view>
			<!-- <nodata text='暂无订单' v-if="data?.length==0||!data"></nodata> -->
			
		</view>
	</view>
</template>

<script>
	import {getOrderList,reset} from '@/api/order'
	import { actionLog } from '@/api/api';
	import {lock} from '@/api/hash'
	// import nodata from '@/components/nodata/index.vue'
	export default {
		data() {
			return {
				timeData: [],
				data: [],
				status : 0
			};
		},
		components:{
			// nodata
		},
		onLoad(options) {
			this.status = options.status || 0;
			this.init();
		},
		methods:{
			init(){
				getOrderList({status:this.status}).then(res => {
					this.data = res.data;
				}).catch(e =>{
					this.toast(e.msg);
				})
				actionLog({"url" : 'pages/order/order?status='+this.status,'mark' : ''}).then(res =>{
					
				}).catch( e =>{
					
				});
			},
			timeChange(item,e) {
				this.timeData[item.hash.id] = [];
				
				this.timeData[item.hash.id] = e
			},
			resetOrder(hash){
				reset({'id':hash.id}).then(res =>{
					/*
					if ( hash.type == 0 ){
						uni.navigateTo({
							url:'/pages/tiaopei/tiaopei'
						})
					}
					if ( hash.type == 1 ){
						uni.navigateTo({
							url:'/pages/tiaopei3/tiaopei3'
						})
					}*/
					uni.navigateTo({
						url:'/pages/myindex/myindex'
					})
				}).catch(e =>{
					this.toast(e.msg);
				})
				/*
				if ( hash.type == 0 ){
					uni.navigateTo({
						url:'/pages/tiaopei/tiaopei?id='+hash.id
					})
				}
				if ( hash.type == 1 ){
					uni.navigateTo({
						url:'/pages/tiaopei3/tiaopei3?id='+hash.id
					})
				}*/
				
			},
			lockHash(item){
				lock({id:item.id}).then(res =>{
					this.toast(res.msg);
					this.init();
				}).catch(e =>{
					this.toast(e.msg);
				})
			},
			goto(page){
				uni.navigateTo({
					url:'/pages/' + page + '/' + page
				})
			},
		}
	}

</script>

<style lang="scss" scoped>
	page{
		padding: 30rpx 25rpx;
	}
	
	.list{
		.item{
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			padding: 30rpx 25rpx;
			position: relative;
			padding-top: 0;
			.haxi2{
				margin-bottom: 60rpx;
				.items{
					display: flex;

					align-items: center;
					margin-bottom: 50rpx;
					.l{
						font-size: 32rpx;
						width: 100rpx;
					}
					.r{
						display: flex;
						flex: 1;
						justify-content: space-between;
						.btn{
							background-color: #333;
							color: #FFF;
							margin-right: 20rpx;
							width: 200rpx;
							height: 40rpx;
							border-radius: 20rpx;
							font-size: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							
						}
					}
				}
			}
			.date{
				height: 68rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ececec;
				margin-bottom: 30rpx;
				.l{
					// color: #666666;
					font-size: 24rpx;
					flex: 1;
				}
				.r{
					font-size: 24rpx;
					color: #666;
					text{
						color: #0076e2;
					}
				}
			}
			.itemt{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				font-weight: normal;
				line-height: 40rpx;
				font-size: 25rpx;
				.itemtl{
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}
				.itemtr{
					font-size: 32rpx;
					font-weight: bold;
					color: #ee1800;
				}
			}
			.ava{
				position: absolute;
				right: 22rpx;
				top:92rpx;
				>image{
					border-radius: 50%;
				}
				.tip{
					position: absolute;
					right:-2rpx;
					top:-2rpx;
				}
			}
			.itemm{
				font-size: 24rpx;
				color: #333333;
				margin-bottom: 20rpx;
				display: flex;
				.btnStatus{margin-right: 20rpx;}
				
			}
			.itemm2{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 20rpx;
				.li{
					padding: 0 10rpx;
					height: 40rpx;
					background-color: #f5f5f5;
					border-radius: 10rpx;
					font-size: 24rpx;
					color: #666666;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 10rpx;
				}
			}
			.itemm3{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #333333;
				margin-bottom: 20rpx;
				image{
					margin-right: 15rpx;
				}
			}
			.itemm4{
				background-color: #f5f5f5;
				height: 64rpx;
				line-height: 64rpx;
				font-size: 24rpx;
				color: #666;
				padding: 0 13rpx;
				border-radius: 10rpx;
			}
			.itemb{
				display: flex;
				align-items: center;
				.itembl{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #333333;
					flex: 1;
					image{
						border-radius: 50%;
						overflow: hidden;
						margin-right: 20rpx;
					}
				}
				.itembr{
					font-size: 24rpx;
					color: #888888;
				}
			}
		}
	}
</style>
